<template>
  <div>
    <el-row>
      <el-button type="primary" @click="addUser()">添加图片</el-button>
    </el-row>
    <br>
    <br>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="图片名称" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="上传日期" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.madeTime }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            active-text="启用"
            @change="isEnableChange(scope.row.isEnable,scope.row.id)"
          ></el-switch>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">预览</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 这是修改按钮弹窗 -->
    <el-dialog title="预览图片" :visible.sync="handleEditVisible" width="50%" center>
      <span slot="footer" class="dialog-footer">
        <viewer :images="images">
          <img :src="images.src" :key="images.src" width="100%">
        </viewer>
        <el-button @click="handleEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 这是新建用户按钮弹窗 -->
    <el-dialog title="添加图片" :visible.sync="addUserVisible" width="30%" center>
      <span slot="footer" class="dialog-footer">
        <el-form :model="form">
          <!-- <el-form-item label="图片名称" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item> -->
          <!-- 图片上传 -->
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://localhost:8301/blog/images/saveImage"
            :file-list="fileList"
            :auto-upload="false"
            :limit=1
          >
            <el-button slot="trigger" size="medium" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="medium"
              type="success"
              @click="submitUpload"
            >上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //消息
      messageValue: "",
      messageType: "",
      //后台数据
      tableData: [],
      // 编辑弹窗
      handleEditVisible: false,
      formLabelWidth: "20%",
      //新增用户弹窗
      addUserVisible: false,
      form: [],
      // 是否删除
      visible2: false,
      images: ["../../../static/imgs/p1.png"],
    };
  },
  methods: {
    // 消息弹窗
    message() {
      this.$message({
        showClose: true,
        message: this.messageValue,
        type: this.messageType
      });
    },
    //页面加载时获取用户数据
    getAllImages() {
      this.$axios({
        method: "get",
        url: "/images/getAllImages",
        params: { isEnable: 1 }
      }).then(successResponse => {
        this.tableData = successResponse.data;
        for (var i = 0; i < successResponse.data.length; i++) {
          if (this.tableData[i].isEnable == 0) {
            this.tableData[i].isEnable = false;
          } else if (this.tableData[i].isEnable == 1) {
            this.tableData[i].isEnable = true;
          }
          var dateee = new Date(this.tableData[i].madeTime).toJSON();
          var date = new Date(+new Date(dateee) + 8 * 3600 * 1000)
            .toISOString()
            .replace(/T/g, " ")
            .replace(/\.[\d]{3}Z/, "");
          this.tableData[i].madeTime = date;
        }
      });
    },
    // 改变用户的启用停用状态
    isEnableChange(isEnable, id) {
      this.$axios({
        method: "get",
        url: "/images/setIsEnable",
        params: { isEnable: isEnable, id: id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.getAllImages(); //更新页面
      });
    },
    // 预览按钮
    handleEdit(index, row) {
      //显示弹窗
      this.handleEditVisible = true;
      // 赋值
      this.images = row;
    },
    //保存编辑的内容
    saveEdit() {
      this.handleEditVisible = false;
    },
    // 删除账户
    handleDelete(index, row) {
      //保存内容
      this.$axios({
        method: "get",
        url: "/images/deleteImage",
        params: { id: row.id }
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageValue = "成功";
          this.messageType = "success";
          this.message();
        } else {
          this.messageValue = "失败";
          this.messageType = "error";
          this.message();
        }
        this.getAllImages(); //更新页面
      });
    },
    addUser() {
      this.addUserVisible = true;
    },
    saveUser() {
      this.messageType = "error"; //先设置成错误，后面的判断就不用设置了，axios里面会根据返回值再给massagetype赋值
      if (this.form.username == "") {
        this.messageValue = "用户名不能为空";
        this.message();
        return;
      }
      if (this.form.passwd == "") {
        this.messageValue = "密码不能为空";
        this.message();
        return;
      }
      // 开始保存数据
      this.form.isAdmin = 1;
      this.form.isEnable = 0;
      this.form.dr = 0;
      this.$axios({
        method: "post",
        url: "/images/saveUser",
        data: JSON.stringify(this.form)
      }).then(successResponse => {
        if (successResponse.data == "success") {
          this.messageType = "success";
          this.messageValue = "新增用户成功";
          this.message();
          // this.$router.push({ path: "/index" });
        } else {
          this.messageType = "error";
          this.messageValue = "新增用户失败";
          this.message();
        }
        this.getAllImages(); //更新页面
        this.form.username = "";
        this.form.passwd = "";
        this.form.isEnable = "";
        this.form.isAdmin = "";
        this.form.dr = "";
        this.form.id = "";
      });
      this.addUserVisible = false;
    },
    //图片上传
    submitUpload() {
      this.$refs.upload.submit();
    },
  },
  created() {
    this.getAllImages();
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #ffffff;
  color: #333;
  /* text-align: right; */
  /* margin-right: 20%; */
  line-height: 60px;
}
.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
